<!-- 日期选择 -->

<template>
  <q-input
    :model-value="modelValue"
    mask="####-##-##"
    :dense="dense"
    :style="'min-width:125px;' + (Number(width) > 0 ? 'max-width: ' + width + 'px' : '')"
    :label="label"
    :rules="rules"
    :hide-bottom-space="hideBottomSpace"
  >
    <template v-if="icon !== false" #append><q-icon :name="icon === true ? mdiCalendarMonthOutline : icon" /></template>
    <q-menu v-model="menu">
      <q-date ref="dateRef" v-model="modelValue" mask="YYYY-MM-DD" :minimal="minimal" @update:model-value="menu = false" />
    </q-menu>
  </q-input>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { QDate, ValidationRule } from 'quasar';
  import { mdiCalendarMonthOutline } from '@quasar/extras/mdi-v7';

  const modelValue = defineModel({ type: String });
  defineProps({
    label: { type: String, default: '创建日期' },
    width: { type: [String, Number], default: undefined },
    dense: { type: Boolean, default: false },
    rules: { type: [Array<ValidationRule>], default: undefined },
    hideBottomSpace: { type: Boolean, default: false },
    minimal: { type: Boolean, default: false },
    icon: { type: [Boolean, String], default: mdiCalendarMonthOutline },
  });

  const menu = ref(false);
  const dateRef = ref<QDate>();
</script>

<style lang="scss">
  .q-date {
    width: 260px;
    min-width: 260px;
    &__header {
      padding: 5px 8px;
    }
    &__view {
      padding: 0 5px 0;
      min-height: 200px;
    }
    &__actions {
      padding: 0 10px 5px;
    }
    &__calendar-days-container {
      min-height: 195px;
    }
  }
  .q-date--portrait-standard .q-date__header {
    height: 65px;
  }
</style>
